<template>
	<div class="recommend">
		<div class="recommend-item" v-for="item in recommend" v-show="item.image">
			<div class="image-item">
				<a :href="item.item_url">
					<img
						:src="item.image" 
						alt="" 
						@load="imgLoad">
				</a>
			</div>
			<div class="text">
				<div class="text-item">
					{{item.title}}
				</div>
				<div class="like">
					<span class="price">{{item.price}}</span>
					<span class="cfav">☆{{item.cfav}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Recommend',
		props:{
			recommend:Array
		},
		data(){
			return {
				imageLength:0,
				count:0
			}
		},
		watch:{
			recommend(){
				this.imageLength = this.recommend.length;
			}
		},
		methods:{
			imgLoad(){
				if( ++this.count >= this.imageLength -5 ){
					this.$emit('recommendImg')
				}
			}
		}
	}
</script>

<style scoped>
	.recommend{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0.1rem;
		font-size: 0.373333rem;
	}
	.recommend-item{
		width: 47%;
		overflow: hidden;
	}
	.image-item a{
		display: inline-block;
		width: 100%;
	}
	.image-item{
		width: 100%;
		height: auto;
	}
	.image-item img {
		width: 100%!important;
		height: auto!important;
		border-radius: 0.213333rem;
	}
	.text{
		width: 100%;
		overflow: hidden;
	}
	.text-item {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0.08rem 0;
		text-align: left;
		width: 100%;
	}
	.like {
		width: 100%;
		text-align: center;
		padding: 0.08rem 0;
	}
	.price {
		color: orangered;
		padding-right: 0.266666rem;
	}
</style>
